<template>
  <div>
    <a-modal
      title="补交"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="暂不收款"
      okText="确认收款"
      width="750px"
    >
      <div>
        <p>支付信息</p>
        <div class="paybox">
          <div>
            <span>应收金额：</span>
            <span>￥{{Number(orderData.receivable)-Number(orderData.real_price)}}</span>
          </div>
          <div style="margin-top:10px;">
            <div>
              <span>收款方式：</span>
            </div>
            <div class="paycontent">
              <div class="other-pay-type" v-for="(item,index) in  btnStyle" :key="index">
                <div class="pay-type-box">
                  <a-checkbox @change="checkedChange($event,item.type,index)" v-model="item.check">
                    <a-icon
                      :type="item.icon"
                      :style="{color:item.color,'margin-right':'10px','font-size':'15px'}"
                    ></a-icon>
                    <span style="padding-right:5px;">{{item.text}}</span>
                  </a-checkbox>
                  <div style="margin-right:5px;" v-if="item.check">
                    <a-input
                      v-model="item.price"
                      onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
                      style="outline: none;border:none;width:80px;box-shadow:none;text-align:right;"
                    />
                    <span style="padding-left:5px;">元</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="border-top: 1px solid #e8e8e8;padding-top: 8px;">
            <span style="font-size: 14px;">实收金额：</span>
            <span style="color: #ff8534;font-size: 15px;">￥{{form.real_price}}</span>
          </div>
          <div v-if="Number(form.receivable)>Number(form.real_price)">
            <span style="font-size: 14px;">欠费金额：</span>
            <span
              style="font-size: 15px;"
            >￥{{(Number(form.receivable)-Number(form.real_price)).toFixed(2)}}</span>
          </div>
        </div>
      </div>
      <div style="padding-top:20px">
        <p>其他信息</p>
        <div style="padding:0 20px;">
          <a-form-model
            ref="ruleForm"
            :model="form"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
            layout="inline"
          >
            <a-form-model-item label="补交时间:">
              <a-date-picker show-time @change="changeDate" v-model="timer" />
            </a-form-model-item>
            <a-form-model-item label="经办人:">
              <a-input placeholder="请输入经办人" v-model="form.operator" style="width:200px;" />
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { orderdetails, makeup } from '@/api/order'
import moment from 'moment'
export default {
  data() {
    return {
      ischecked:false,
      visible: false,
      confirmLoading: false,
      btnStyle: [
        {
          type: 1,
          text: '支付宝',
          color: '#1890ff',
          icon: 'alipay-circle',
          check: false,
          price: 0,
        },
        {
          type: 2,
          text: '微信',
          color: '#52c42a',
          icon: 'wechat',
          check: false,
          price: 0,
        },
        {
          type: 3,
          text: '现金',
          color: '#FF7F24',
          icon: 'transaction',
          theme: 'filled',
          check: false,
          price: 0,
        },
        {
          type: 4,
          text: '网银转账',
          color: '#1296db',
          icon: 'global',
          check: false,
          price: 0,
        },
        {
          type: 5,
          text: 'POS机刷卡',
          color: '#39d63e',
          icon: 'credit-card',
          check: false,
          price: 0,
        },
      ],
      // orderData:{},
      orderData: {
        receivable: 0,
        real_price: 0,
      },
      timer: moment(),
      form: {
        //应收
        receivable: 0,
        //实收
        real_price: 0,
        purchase_at: null,
        operator: this.$store.state.user.name,
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 12 },
    }
  },

  watch: {
    btnStyle: {
      handler(val) {
        let num = 0
        val.forEach((item) => {
          if (item.check == true) {
            num = num + Number(item.price)
          }
        })
        this.form.real_price = num.toFixed(2)
      },
      deep: true,
    },
  },
  methods: {
    moment,
    showModal(data) {
      if (data) {
        this.orderData = data
        console.log(data, '111111111')
        this.form.receivable = Number(this.orderData.receivable) - Number(this.orderData.real_price)
        this.visible = true
      }
    },
    handleOk(e) {
      this.confirmLoading = true

      let s = 0
      let parmas = JSON.parse(JSON.stringify(this.form))
      if (!Number(parmas.real_price)) {
        this.$message.warning('实收金额不能为0')
        this.confirmLoading = false
        return
      }
      delete parmas.real_price

      this.btnStyle.forEach((item) => {
        if (item.check == false) {
          s++
        }
      })
      if (s == this.btnStyle.length) {
        this.$message.warning('请选择支付方式')
        this.confirmLoading = false
        return
      }
      parmas.real_price_arr = []
      this.btnStyle.forEach((item) => {
        if (item.price && Number(item.price) !== 0) {
          parmas.real_price_arr.push({
            real_price: item.price,
            charge_type: item.type,
          })
        }
      })
      parmas.purchase_at = moment(this.timer).format('YYYY-MM-DD HH:mm:ss')
      console.log(parmas)
      makeup(parmas, this.orderData.id)
        .then((res) => {
          this.$message.info('补交成功')
          this.visible = false
          this.confirmLoading = false
          this.$refs.ruleForm.resetFields()
          this.btnStyle = [
            {
              type: 1,
              text: '支付宝',
              color: '#1890ff',
              icon: 'alipay-circle',
              check: false,
              price: 0,
            },
            {
              type: 2,
              text: '微信',
              color: '#52c42a',
              icon: 'wechat',
              check: false,
              price: 0,
            },
            {
              type: 3,
              text: '现金',
              color: '#FF7F24',
              icon: 'transaction',
              theme: 'filled',
              check: false,
              price: 0,
            },
            {
              type: 4,
              text: '网银转账',
              color: '#1296db',
              icon: 'global',
              check: false,
              price: 0,
            },
            {
              type: 5,
              text: 'POS机刷卡',
              color: '#39d63e',
              icon: 'credit-card',
              check: false,
              price: 0,
            },
          ]
          this.$emit('update')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '补交失败')
          this.confirmLoading = false
        })
    },
    handleCancel() {
      this.visible = false
      this.$refs.ruleForm.resetFields()
    },
    checkedChange(a, b, index) {
      if (a.target.checked == true) {
        let num = 0
        this.btnStyle.forEach((val) => {
          num = num + Number(val.price)
        })
        let noPay = (Number(this.form.receivable) - num).toFixed(2)
        this.btnStyle[index].check = a.target.checked
        this.btnStyle[index].price = noPay > 0 ? noPay : 0
      } else {
        this.btnStyle[index].check = a.target.checked
        this.btnStyle[index].price = 0
      }
    },
    changeDate(date, dateString) {
      this.form.purchase_at = dateString
    },
  },
}
</script>

<style scoped lang="less">
.paybox {
  padding-left: 20px;
}
.paycontent {
  display: flex;
  margin-left: 60px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.other-pay-type {
  margin-right: 12px;
  margin-bottom: 8px;
  width: 270px;
  display: inline-table;
}
.pay-type-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 12px;
  width: 270px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
}
</style>